import React, { Suspense, lazy } from 'react';
// 引入全局样式
import './styles/App.scss';

import { HashRouter, Route, Switch, Redirect } from "react-router-dom";

// 联系代理商的方法 connect
import { connect } from "react-redux";
// 导入 actionTypes

// import Home from './pages/Home';
// import CitySelect from './pages/CitySelect';
// import MapFound from './pages/MapFound';
// // 404 页面 - 根据自己精力选择是否需要完善
// import PageNotFound from './pages/PageNotFound';

// 前端新人：
//    1. 我开发的时候使用 BrowserRouter 是没有问题的。
//    2. 运行 yarn build 打包成静态文件 html,css,js
//    3. 发给后端人员部署到公司服务器。
//    4. 代码就不行了。
// 总结：后端的问题。
//    如果使用 BrowserRouter 需要服务器做额外的配置才能支持。
//    打包工具的 webpack 底层做了服务器的额外配置，所以你才能运行。

import { GET_CITY_ACTION } from "./store/actionCreator";

// 测试的组件
// import ReactList from "./demo/reactList";
// import RefTest from "./demo/RefTest";
// import AntdmPickerView from "./demo/AntdmPickerView";
// import ReactPropTypes from "./demo/ReactPropTypes";

// import axios from "axios";
// axios.get('http://localhost:3000/api').then(res => {
//   console.log(res);
// });

// 这些赋值代码懒加载的组件一定要写到所有的 import 后面
const Home = lazy(() => import('./pages/Home'));
const CitySelect = lazy(() => import('./pages/CitySelect'));
const MapFound = lazy(() => import('./pages/MapFound'));
const PageNotFound = lazy(() => import('./pages/PageNotFound'));

const Loading = () => {
  return <h1>loading 中</h1>;
};

console.log('打印webpack环境变量名', process.env.REACT_APP_API);


class App extends React.Component {
  // 组件生命周期函数
  componentDidMount() {
    // 调用获取定位的方法
    this.props.getCity();
  }
  render() {
    return (
      <div>
        {/* <ReactPropTypes msg='你好呀普通传值' ml={50} activeIndex={1}></ReactPropTypes> */}
        {/* <ReactPropTypes msg='第二个组件，没有传activeIndex' ml={50}></ReactPropTypes> */}
        {
          // !! 先获取城市，再显示页面
          this.props.cityName &&
          // false &&
          <HashRouter>
            <Switch>
              {/* 如果是根路径 "/" 重定向到 "/home" 展示 tabBar 页 */}
              <Suspense fallback={<Loading />}>
                <Route exact path="/"><Redirect to="/home"></Redirect></Route>
                <Route path="/home" component={Home}></Route>
                <Route path="/cityselect" component={CitySelect}></Route>
                <Route path="/mapfound" component={MapFound}></Route>
                <Route exact component={PageNotFound}></Route>
              </Suspense>
            </Switch>
          </HashRouter>
        }
      </div>
    );
  }
}

// 把仓库 state 映射到组件的 props 上的函数
const mapStateToProps = (state) => ({
  cityName: state.address.city
});

// 把 dispatch 修改的方法映射到组件 props 上的函数
const mapDispatchToProps = (dispatch) => ({
  getCity: () => {
    // 调用 GET_CITY_ACTION
    dispatch(GET_CITY_ACTION());
  }
});

// connect 联系 react-redux 代理商，
// 把仓库的 state 和 dispatch 映射到 App 组件的 props 上
export default connect(mapStateToProps, mapDispatchToProps)(App);
